<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Mentions 提及</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style type="text/css">
.ant-mentions{
	margin-left: 20px;
	width: 500px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">基本用法</p>
	<a-mentions v-model:value="value1_1" autofocus :options="options1" @select="onSelect1"></a-mentions>
	
	<a-divider class="a-divi" orientation="left">自定义触发字符</a-divider><!-- =============================================================== -->
	<p class="desc">通过 prefix 属性自定义触发字符。默认为 @, 可以定义为数组。</p>
	<a-mentions v-model:value="value2_1" placeholder="@人，#标签" :prefix="['@', '#']" :options="options2" @search="onSearch2" @select="onSelect1"></a-mentions>
	
	<a-divider class="a-divi" orientation="left">向上展开</a-divider><!-- =============================================================== -->
	<p class="desc">向上展开建议。</p>
	<a-mentions v-model:value="value3_1" placement="top" :options="options1"></a-mentions>
	
	<a-divider class="a-divi" orientation="left">自定义状态</a-divider><!-- =============================================================== -->
	<p class="desc">使用 status 为 Mentions 添加状态。可选 error 或者 warning。</p>
	<a-space direction="vertical">
		<a-mentions v-model:value="value4_1" :options="options1" autofocus status="error" @select="onSelect1"></a-mentions>
		<a-mentions v-model:value="value4_2" :options="options1" autofocus status="warning" @select="onSelect1"></a-mentions>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">异步加载</a-divider><!-- =============================================================== -->
	<p class="desc">匹配内容列表为异步返回时。（这里和官方文档做得不一样，具体可以去官方文档看）</p>
	<a-mentions v-model:value="value5_1" :options="options5" :loading="loading5" @search="onSearch5"></a-mentions>
	
	<a-divider class="a-divi" orientation="left">自定义显示选项</a-divider><!-- =============================================================== -->
	<p class="desc">可以通过 option 插槽来自定义待选项的展示</p>
	<a-mentions v-model:value="value6_1" :options="options1" @select="onSelect1">
		<template #option="{id, value, label}">
			<span class="red">{{label}}（{{id}}）</span>
		</template>
	</a-mentions>
	
	<a-divider class="a-divi" orientation="left">无效或只读</a-divider><!-- =============================================================== -->
	<p class="desc">通过 disabled 属性设置是否生效。通过 readonly 属性设置是否只读。</p>
	<a-space direction="vertical">
		<a-mentions v-model:value="value7_1" :options="options1" placeholder="this is disabled Mentions" disabled></a-mentions>
		<a-mentions v-model:value="value7_2" :options="options1" placeholder="this is readOnly a-mentions" readonly></a-mentions>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">配合 Form 使用</a-divider><!-- =============================================================== -->
	<p class="desc">配合 Form 使用。（字段验证在学完 Form 之后完善）</p>
	<a-form layout="horizontal">
		<a-form-item label="顶尖程序员们" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" name="coders" v-bind="validateInfos8.coders">
			<a-mentions v-model:value="modelRef8.coders" rows="1" :options="options1"></a-mentions>
		</a-form-item>
		<a-form-item label="他们的简介" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" name="bio" v-bind="validateInfos8.bio">
			<a-mentions v-model:value="modelRef8.bio" rows="3" placeholder="You can use @ to ref user here" :options="options1"></a-mentions>
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
			<a-button type="primary" @click="handleSubmit">Submit</a-button>
			<a-button style="margin-left: 8px" @click="resetFields">Reset</a-button>
		</a-form-item>
	</a-form>
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		value1_1: '打一个@号试试...',
		options1: [
			{id: 3, value: '张三', label: '张三'},
			{id: 4, value: '李四', label: '李四'},
			{id: 5, value: 'user5', label: '王五'},
		],
		
		value2_1: '',
		tem2: [
			{id: 30, value: '个', label: '个'},
			{id: 40, value: '只', label: '只'},
			{id: 50, value: 't5', label: '双'},
		],
		prefix2: '@',
		
		value3_1: '',
		
		value4_1: '',
		value4_2: '',
		
		value5_1: '@Tom试试...',
		loading5: false,
		users5: [],
		search5: '',
		
		value6_1: '',
		
		value7_1: '', 
		value7_2: '',
		
		modelRef8: {coders: '', bio: ''},
		validateInfos8: {coders: '', bio: ''},
		
	}
},
computed:{
	options2(){
		if(this.prefix2 == '@'){
			return this.options1;
		}else if(this.prefix2 == '#'){
			return this.tem2;
		}else{
			return [];
		}
	},
	options5(){
		if(this.search5){
			return this.users5.map(user => {
				return {key: user.id, value: user.nick, label: user.name, payload: user};
			});
		}else{
			//其实在搜索关键字为空的时候，可以给一些推荐的选项
			return [];
		}
	},
	
},
methods:{
	onSelect1(option){
		console.log('onSelect1', option);
	},
	onSearch2(value, prefix){
		// console.log('onSearch2', value, prefix);
		this.prefix2 = prefix;
	},
	
	onSearch5(value, prefix){
		console.log('onSearch5', value, prefix);
		this.search5 = value;
		this.loading5 = !!value;
		this.init_users5();
	},
	init_users5(){
		//实际项目中应该用this.search5的值去数据库搜索，这里用定时器展示效果
			// dump('search5', this.search5);
		setTimeout(()=>{
			this.users5 = [
				{id: 3, nick: '李雷', name: '李雷'},
				{id: 4, nick: '韩梅梅', name: '韩梅梅'},
				{id: 5, nick: 'Tom', name: '汤姆'},
			];
			this.loading5 = false;
		}, 1500);
		
		
	},
	
	handleSubmit(e){
		console.log(e.preventDefault());
		console.log(e);
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
